<template>
  <div>
    <el-card class="header promote-add-card" >
      <div >
        <el-page-header @back="back" > 
          <template slot="content">
            <div>
              <span>活动修改</span>
               <el-button class="btn" type="primary" @click="safe">保存</el-button>
            </div>
          </template>
        </el-page-header>
      </div>
    
    </el-card>

        <el-card class="promote-add-card">
          <div slot="header">基本信息</div>
          <div>
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="活动名称">
                <el-input v-model="form.name" class="my-input"></el-input>
              </el-form-item>
              <el-form-item label="开始时间">
                <el-date-picker
                class="my-input"
                  v-model="form.startDateTime"
                  type="datetime"
                  placeholder="datetime"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间" >
                <el-date-picker
                  class="my-input"
                  v-model="form.endDateTime"
                  type="datetime"
                  placeholder="datetime"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="活动类型">
                <el-radio-group v-model="form.type" class="my-input">
                  <el-radio
                    v-for="item of type"
                    :key="item"
                    :label="item"
                  ></el-radio>
                </el-radio-group>
              </el-form-item>

        

              <el-form-item label="降价金额" v-if="form.type == '限时降价'" >
                <el-input v-model="form.discount" class="my-input"></el-input>
              </el-form-item>

              <el-form-item label="赠送商品" v-if="form.type == '赠品促销'" 
                ><el-input v-model="form.gift" class="my-input"></el-input
              ></el-form-item>

      
              <el-form-item label="活动海报">
                <el-upload
              :multiple="false"
              ref="idCardImg-back-side"
              action=" " 
              list-type="picture-card" 
              :auto-upload="false"
              :http-request="uploadidCardImg_back"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
              </el-form-item>
              <el-form-item label="备注">
                <el-input type="textarea" v-model="form.detail"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
        <el-card class="promote-add-card">
          <div slot="header">活动范围</div>
          <div>
            <el-table
            ref="table"
              :data="tableData"
              style="width: 100%"
              @selection-change="handleTableSelect"
            >
            <el-table-column type="selection"></el-table-column>
              <el-table-column prop="id" label="编号"> </el-table-column>
              <el-table-column prop="type" label="类型"> </el-table-column>
              <el-table-column prop="name" label="备注"> </el-table-column>
            </el-table>
            <el-pagination
              :small='true'
              background
              :hide-on-single-page=true
              :page-size="pagesize"
              :pager-count="11"
              layout="prev, pager, next"
         
              @current-change="current_change"
            
            >
            </el-pagination>
          </div>
        </el-card>
   
  </div>
</template>
<script>
import { mapState } from "vuex";

export default {
  mounted(){

    let find = function(element,target,attr){
      for(let i of target){
        if(i[attr]==element[attr]){
          return true
        }
      }
      return false
    }

    let data = this.current_activity
      this.form.name = data.activityName
      this.form.startDateTime = data.startDateTime
      this.form.endDateTime = data.endDateTime
      this.form.postImg = data.postImg
      this.form.type = data.type
      this.form.range = data.range,
      this.form.discount = data.discount
      this.form.gift =data.gift
      this.form.detail = data.detail
      console.log( this.form)
      this.tableData.forEach(element => {
        if(find(element,this.form.range,'id')){
          this.$refs.table.toggleRowSelection(element,true)
        }
      });
     
   
  },
  methods:{
    back(){
      this.$router.go(-1)
    },
    uploadidCardImg_back(){
      //自定义上传
    },
    safe(){
      let data = this.form
      //假的axios
      data.activityId = this.current_activity.activityId
      data.activityName = this.form.name
      this.$store.commit('update_activity',data)
      this.$message.success('修改成功')
      this.$router.push("/home/promote")
    },
    handleTableSelect(selection){
      this.selectedItem = selection
      this.form.range = selection
    },
    current_change(currentPage){
      console.log(currentPage)
      this.currentPage = currentPage;
    },
  },
  computed:{
      ...mapState(["current_property_index",'current_activity']),
  tableData(){
      let start = (this.currentPage - 1) * this.pagesize;
      let end = this.currentPage * this.pagesize
      let t = this.table.slice(start,end).concat()
      while(t.length!=this.pagesize) t.push({id:"--",name:"--",type:"--"})
      return t
    }
  
  },
  data() {
    return {
      selectedItem:[],
      pagesize: 5,
      currentPage: 1,
      table: [
        {
          id: "001",
          name: "A北区部分上架",
          type: "普通销售",
        },
        {
          id: "002",
          name: "B西区热销抢购",
          type: "摇号销售",
        },
        {
          id: "003",
          name: "B西区热销抢购",
          type: "摇号销售",
        },
        {
          id: "004",
          name: "B西区热销抢购",
          type: "摇号销售",
        },
        {
          id: "005",
          name: "B西区热销抢购",
          type: "摇号销售",
        },
        {
          id: "006",
          name: "B西区热销抢购",
          type: "摇号销售",
        },
        {
          id: "007",
          name: "B西区热销抢购",
          type: "摇号销售",
        },

      ],
      type: ["限时降价", "赠品促销"],
      range: ["适用全场", "指定车位"],
      form: {
        name: "",
        startDateTime: "",
        endDateTime: "",
        type: "",
        range: "",
        postImg: null,
        detail:"",
        discount: 0,
        gift: "",
      },
    };
  },

};
</script>

<style scoped>
.el-card{
  margin-top: 2rem;
}
.promote-add-card{
  margin-bottom: 1rem;
}
.el-form{
  width: 70%;
  margin:auto;
}
.el-pagination{
  margin-top: 1rem;
  text-align: center;
}
.header{
  position: relative;
} 
.btn{
  position: absolute;
  right: 1rem;
  top: 10px;
  bottom: 10px;
}
</style>